/**
 * 清除浮动的混合宏
 * 该混合宏用于清除元素内的浮动内容，确保父元素能够正确包裹其子元素。
 */
 @mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/**
 * 自定义滚动条样式的混合宏
 * 该混合宏用于自定义 WebKit 浏览器中的滚动条样式。
 * - `&::-webkit-scrollbar-track-piece` 定义滚动条轨道的颜色。
 * - `&::-webkit-scrollbar` 定义滚动条的宽度。
 * - `&::-webkit-scrollbar-thumb` 定义滚动条滑块的颜色和圆角。
 */
@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6; // 轨道背景颜色
  }

  &::-webkit-scrollbar {
    width: 6px; // 滚动条宽度
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf; // 滑块背景颜色
    border-radius: 20px; // 滑块圆角
  }
}

/**
 * 相对定位的混合宏
 * 该混合宏用于设置元素的相对定位，并使其占据其父容器的100%宽度和高度。
 */
@mixin relative {
  position: relative; // 相对定位
  width: 100%; // 占据父容器100%宽度
  height: 100%; // 占据父容器100%高度
}

/**
 * 百分比宽度居中对齐的混合宏
 * 该混合宏用于设置元素的宽度为指定百分比，并使其在父容器中水平居中。
 * @param {number} $pct - 元素的宽度百分比
 */
@mixin pct($pct) {
  width: #{$pct}; // 设置元素宽度为指定百分比
  position: relative; // 相对定位
  margin: 0 auto; // 水平居中
}

/**
 * 三角形形状的混合宏
 * 该混合宏用于创建一个纯 CSS 的三角形形状。
 * @param {number} $width - 三角形的宽度
 * @param {number} $height - 三角形的高度
 * @param {color} $color - 三角形的颜色
 * @param {string} $direction - 三角形的方向（up, right, down, left）
 */
@mixin triangle($width, $height, $color, $direction) {
  $width: $width / 2; // 计算宽度的一半
  $color-border-style: $height solid $color; // 有颜色边框的样式
  $transparent-border-style: $width solid transparent; // 透明边框的样式
  height: 0; // 高度设为0
  width: 0; // 宽度设为0

  @if $direction == up {
    border-bottom: $color-border-style; // 底部边框
    border-left: $transparent-border-style; // 左侧透明边框
    border-right: $transparent-border-style; // 右侧透明边框
  }

  @else if $direction == right {
    border-left: $color-border-style; // 左侧边框
    border-top: $transparent-border-style; // 顶部透明边框
    border-bottom: $transparent-border-style; // 底部透明边框
  }

  @else if $direction == down {
    border-top: $color-border-style; // 顶部边框
    border-left: $transparent-border-style; // 左侧透明边框
    border-right: $transparent-border-style; // 右侧透明边框
  }

  @else if $direction == left {
    border-right: $color-border-style; // 右侧边框
    border-top: $transparent-border-style; // 顶部透明边框
    border-bottom: $transparent-border-style; // 底部透明边框
  }
}